<!-- 联系人列表页面 -->
<template>
  <div class="aillo-friend-list" v-if="groupList">
    <div class="my-phone" @click="toChat">
      <img class="my-phone__avatar" src="../../assets/picture/fileAssistant@2x.png" />
      <span>{{ selectfileHelper.nickName ? selectfileHelper.nickName : selectfileHelper.name }}</span>
    </div>
    <div class="data-tree">
      <div class="data-tree__title" @click="reversalFriendlistVisible">
        <div class="data-tree__title__left">
          <i v-if="!friendlists.visible" class="tico tico-right-large" />
          <i v-if="friendlists.visible" class="tico tico-down-large" />
          <span class="data-tree__title__left__name">联系人</span>
          <span class="data-tree__title__left__number">{{ friendlists.data.length }}</span>
        </div>
      </div>
      <div v-show="sortFriendNameList.visible">
        <div v-for="(item, index) in sortFriendNameList.data" :key="index">
          <template v-if="item.wordsList.length > 0">
            <p class="name-tip">{{ item.letter}}</p>
            <template v-for="(temp) in item.wordsList">
              <FriendCard
                v-for="(info, i) in formRemarkToInfo(temp.word)"
                :key="'f'+item.letter+temp.word + i"
                type="friend"
                :friendInfo="info"
              />
            </template>
          </template>
        </div>
      </div>
    </div>
    <div class="data-tree">
      <div class="data-tree__title" @click="reversalGruoplistVisible">
        <div class="data-tree__title__left">
          <i v-if="!grouplists.visible" class="tico tico-right-large" />
          <i v-if="grouplists.visible" class="tico tico-down-large" />
          <span class="data-tree__title__left__name">群聊</span>
          <span class="data-tree__title__left__number">{{ grouplists.data.length }}</span>
        </div>
      </div>
      <div v-show="sortGroupNameList.visible">
        <div v-for="(item, index) in sortGroupNameList.data" :key="item.letter+index">
          <template v-if="item.wordsList.length > 0">
            <p class="name-tip">{{ item.letter}}</p>
            <template v-for="temp in item.wordsList">
              <FriendCard
                v-for="(info, i) in formNameToInfo(temp.word)"
                :key="'g'+item.letter+temp.word + i"
                type="group"
                :friendInfo="info"
              />
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import FriendCard from './FriendCard'
import { Pinyin2Group } from 'pinyin2group'
import _ from 'lodash'
export default {
  components: { FriendCard },
  props: ['friendList'],
  created () {
    if (this.groupList) {
      this.grouplists = {
        visible: false,
        data: this.groupList
      }
    }
  },
  computed: {
    ...mapState('app', ['unreadList', 'groupList', 'chatList']),
    uneradNum: function () { // 未读信息数，不过应该是废弃了，蛮留着的
      const temp = Object.values(this.unreadList)
      let number = 0
      for (let i = 0; i < temp.length; i++) {
        number += temp[i]
      }
      return number
    },
    sortFriendNameList: function () { // 联系人(好友)根据名称首字母排序
      const friendNameList = this.friendlists.data.map(e => { return { word: this.getRemark(e) } })
      // console.log('this.friendlists', this.friendlists)
      const sortFriendNameList = new Pinyin2Group().groupByFirstLetter(friendNameList)
      for (let i = 0; i < sortFriendNameList.length; i++) {
        for (let j = 0; j < sortFriendNameList[i].wordsList.length; j++) {
          sortFriendNameList[i].wordsList = _.uniqWith(sortFriendNameList[i].wordsList, (a, b) => a.word === b.word)
        }
      }
      return { visible: this.friendlists.visible, data: sortFriendNameList }
    },
    sortGroupNameList: function () { // 联系人(群聊)根据名称首字母排序
      const groupNameList = this.grouplists.data.map(e => { return { word: e.name } })
      const sortGroupNameList = new Pinyin2Group().groupByFirstLetter(groupNameList)
      for (let i = 0; i < sortGroupNameList.length; i++) {
        for (let j = 0; j < sortGroupNameList[i].wordsList.length; j++) {
          sortGroupNameList[i].wordsList = _.uniqWith(sortGroupNameList[i].wordsList, (a, b) => a.word === b.word)
        }
      }
      return { visible: this.grouplists.visible, data: sortGroupNameList }
    }
  },
  data () {
    return {
      friendlists: {
        visible: false,
        data: this.friendList
      },
      grouplists: {
        visible: false,
        data: this.groupList ? this.groupList : []
      },
      selectfileHelper: { roomId: '100008', name: '文件传输助手', nickName: '文件传输助手', avatar: 'https://newfile.aillo.cc/storage/download?userFileId=1248155246685863938', friendType: 'fileFriend', id: sessionStorage.getItem('aillo_id') }
    }
  },
  watch: {
    groupList: {
      handler (data) {
        this.grouplists.data = data
      }
    },
    friendList: {
      handler (data) {
        this.friendlists.data = data
      }
    }
  },
  methods: {
    // 文件助手
    toChat () {
      const _chatList = _.cloneDeep(this.chatList)
      if (_.isUndefined(_chatList[this.selectfileHelper.roomId.toString()])) {
        this.$store.dispatch('app/addChatList', this.selectfileHelper.roomId.toString())
      }
      this.$store.dispatch('app/setRoomId', this.selectfileHelper.roomId)
      this.$store.dispatch('app/setChatPanelType', 'chat')
      this.$store.dispatch('app/setChatListVisible', true)
      // 文件助手
      this.$store.dispatch('app/setSelectMember', this.selectfileHelper)
      if (this.unreadList[this.selectfileHelper.roomId + '']) {
        const temp = _.cloneDeep(this.unreadList)
        temp[this.selectfileHelper.roomId + ''] = 0
        this.$store.dispatch('app/setUnreadList', temp)
      }
    },
    reversalGruoplistVisible () { // 收缩或者展示群列表
      this.grouplists.visible = !this.grouplists.visible
    },
    reversalFriendlistVisible () { // 收缩或者展示好友列表
      this.friendlists.visible = !this.friendlists.visible
    },
    getRemark (info) { // 展示昵称或者用户名
      return info.nickName ? info.nickName : info.name
    },
    formRemarkToInfo (remark) {
      const temp = []
      for (let i = 0; i < this.friendlists.data.length; i++) {
        if (this.getRemark(this.friendlists.data[i]) === remark) {
          temp.push(this.friendlists.data[i])
        }
      }
      return temp
    },
    formNameToInfo (name) {
      const temp = []
      for (let index = 0; index < this.grouplists.data.length; index++) {
        if (this.grouplists.data[index].name === name) {
          temp.push(this.grouplists.data[index])
        }
      }
      return temp
    }
  }
}
</script>

<style lang="scss" scoped>
.aillo-friend-list {
  div {
    user-select: none;
  }
  .name-tip {
    font-size: 14px;
    margin: 10px 17px;
    font-weight:600;
  }
  .my-phone {
    width: calc(100% - 20px);
    height: 80px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 0 10px;
    &__avatar {
      margin-right: 10px;
      width: 40px;
      height: 40px;
    }
    span {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
    }
  }
  .data-tree {
    width: 100%;
    &__title {
      height: 30px;
      display: flex;
      align-items: center;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      cursor: pointer;
      &__left {
        i {
          margin-left: 10px;
          margin-right: 10px;
          font-size: 10px;
        }
        &__name {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: bold;
        }
        &__number {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #999;
          margin-left: 9px;
        }
      }
      &__right {
        background-color: #e93323;
        width: 16px;
        height: 16px;
        border-radius: 100px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
    }
  }
}
</style>
